<template>
  <div class="dashboard-editor-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
    >
      <el-form-item>
        <el-date-picker
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          v-model="date"
          @change="change"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>
    <panel-group
      @handleSetLineChartData="handleSetLineChartData"
      :panelGroupData="panelGroupData"
    />

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" :date-data="dateData" />
    </el-row>

    <!-- <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart />
        </div>
      </el-col>
    </el-row> -->
  </div>
</template>

<script>
import PanelGroup from "./dashboard/PanelGroup";
import LineChart from "./dashboard/LineChart";
// import RaddarChart from "./dashboard/RaddarChart";
// import PieChart from "./dashboard/PieChart";
// import BarChart from "./dashboard/BarChart";
import { listHomeAmount } from "@/api/home/index";
import { formatDate } from "@/utils/index";

const lineChartData = {
  one: {
    actualData: []
  },
  two: {
    actualData: [100, 82, 91, 154, 162, 140, 145]
  },
  three: {
    actualData: [130, 82, 91, 154, 162, 140, 145]
  },
  four: {
    actualData: [150, 82, 91, 154, 162, 140, 145]
  },
  five: {
    actualData: [200, 82, 91, 154, 162, 140, 145]
  }
};

export default {
  name: "Index",
  components: {
    PanelGroup,
    LineChart
    // RaddarChart,
    // PieChart,
    // BarChart
  },
  data() {
    return {
      dateData: [],
      panelGroupData: {
        itemList: [],
        salesAmount: 0
      },
      lineChartData: lineChartData.one,
      queryParams: {
        startTime: formatDate(
          new Date(
            new Date().getFullYear() - 1,
            new Date().getMonth(),
            new Date().getDate()
          )
        ).split(" ")[0],
        endTime: formatDate(new Date().getTime()).split(" ")[0]
      },
      date: [
        new Date(
          new Date().getFullYear() - 1,
          new Date().getMonth(),
          new Date().getDate()
        ),
        new Date()
      ]
    };
  },
  mounted() {
    this.handleQuery();
    console.log(this.date);
  },
  methods: {
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type];
    },
    handleQuery() {
      listHomeAmount(this.queryParams).then(res => {
        if (res) {
          lineChartData.one.actualData = [];
          this.dateData = [];
          this.panelGroupData = {
            itemList: res.itemList,
            salesAmount: res.salesAmount
          };
          if (res.itemList.length > 0) {
            res.itemList.forEach(current => {
              lineChartData.one.actualData.push(current.salesAmount);
              this.dateData.push(current.orderDate);
            });
          } else {
            lineChartData.one.actualData = [];
            this.dateData = [];
          }
        }
      });
    },
    change(date) {
      if (date) {
        this.queryParams.startTime = formatDate(date[0]).split(" ")[0];
        this.queryParams.endTime = formatDate(date[1]).split(" ")[0];
      }
      // else {
      //   this.queryParams.startTime = "";
      //   this.queryParams.endTime = "";
      // }
    }
  }
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
